<template>
	<view class="guide">
		<swiper :indicator-dots="true" :duration="500" indicator-active-color="rgba(238,188,128,1)" indicator-color="rgba(238,188,128,0.3)" style="width: 100vw;height: 160vw;">
			<swiper-item v-for="i in list" :key="i.id" @click="finish(i.id)">
				<view class="swiper-item">
					<image :src="i.img" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						img: '../../static/images/guide1.png'
					},
					{
						id: 2,
						img: '../../static/images/guide2.png'
					},
					{
						id: 3,
						img: '../../static/images/guide3.png'
					}
				],
			};
		},
		methods: {
			finish(id) {
				if (id==3) {
					uni.setStorageSync('isFirst', 'isFirst')
					this.$goto('/pages/home/index', 'tab')
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #222222;
	}

	.guide {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.swiper-item {
		width: 100%;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
